<template>
    <div class="mt-14">
        <h2 class="flex justify-center items-center mb-7 text-gray-500" @click.self="hideSendBtn">全部评论<span>({{ total }})</span></h2>
        <!-- 卡片 -->
        <div @click.self="hideSendBtn"
            class="w-full px-5 py-10 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <!-- 未登录情况下的输入评论元素 -->
            <div v-if="!isLogin">
                <div class="w-full mb-4 border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-600">
                    <div class="flex items-center">
                        <!-- 用户登录头像 -->
                        <div
                            class="w-16 h-14 border bg-gray-100 rounded-full dark:bg-gray-600 flex items-center justify-center mr-4">
                            <svg class="w-10 h-10 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div id="unLoginComment"
                            class="flex items-center justify-center block mr-4 p-2.5 w-full h-14 py-2 text-sm align-middle text-gray-900 bg-gray-100 rounded-lg border-0 focus:bg-white dark:bg-gray-700 focus:border-gray-300 dark:text-gray-300 dark:placeholder-gray-400">
                            请先
                            <button type="button" @click="showLoginModal"
                                class="inline mx-1 text-xs h-4 w-12 text-white bg-[#1da1f2] hover:bg-[#1da1f2]/50  font-medium rounded px-2.5 py-2.5 text-center inline-flex items-center justify-center dark:focus:ring-[#1da1f2]/55 dark:text-gray-200">
                                登录
                            </button>
                            后发表评论 (・ω・)
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评论发布表单 -->
            <form v-else>
                <div class="w-full mb-4 border-gray-200 rounded-lg bg-white dark:bg-gray-800">
                    <div class="flex items-center">
                        <!-- 用户登录头像 -->
                        <img class="w-10 h-10 rounded-full border dark:border-gray-300" :src="userStore.userInfo.avatar"
                            alt="user photo">
                        <label for="comment" class="sr-only">Your comment</label>
                        <textarea id="comment" rows="1" @click="showSendBtn" v-model="commentForm.content"
                            class="block mx-4 p-2.5 w-full h-10 py-2 text-sm align-middle text-gray-900 bg-gray-100 rounded-lg border-0 hover:border hover:border-gray-300 focus:border hover:bg-white focus:bg-white dark:bg-gray-700 focus:border-gray-300 dark:text-gray-300 dark:placeholder-gray-400"
                            placeholder="发表一个友善的评论吧..." required></textarea>
                    </div>

                    <div v-if="sendButton"
                        class="flex items-center mt-1 justify-between ml-14 px-3 py-2 dark:border-gray-600">
                        <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
                            <!-- Emoji Popover -->
                            <el-popover placement="bottom-start" trigger="click" :width="336" offset=6>
                                <template #reference>
                                    <div type="button"
                                        class="inline-flex justify-center items-center border border-gray-100 dark:border-gray-400 p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                        <svg id="icon" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
                                            viewBox="0 0 16 16">
                                            <path
                                                d="M6.14978 9.5497C5.911519999999999 9.618533333333332 5.77148 9.876833333333334 5.8369800000000005 10.126666666666665C6.010859999999999 10.792133333333332 6.458333333333333 11.221066666666667 6.9891000000000005 11.3022C7.358466666666666 11.371699999999999 7.7259 11.253699999999998 8 10.9912C8.2289 11.203199999999999 8.517266666666666 11.320733333333333 8.822433333333333 11.322099999999999C9.428333333333333 11.324366666666666 9.968266666666667 10.8752 10.163466666666666 10.126666666666665C10.228933333333334 9.876833333333334 10.088899999999999 9.6185 9.850633333333333 9.549733333333332C9.612366666666667 9.480899999999998 9.3661 9.627666666666666 9.300633333333334 9.8775C9.194333333333333 10.287166666666666 8.959666666666667 10.39 8.8136 10.385066666666667C8.6771 10.381133333333333 8.507366666666666 10.289066666666667 8.426033333333333 10.021666666666667C8.366433333333333 9.828 8.1944 9.696733333333333 8.0002 9.696766666666665C7.805999999999999 9.696766666666665 7.634 9.828 7.574399999999999 10.0217C7.479933333333333 10.332566666666665 7.2652 10.411999999999999 7.106766666666666 10.376533333333333C6.978133333333333 10.348466666666667 6.791413333333333 10.229966666666666 6.699806666666666 9.877466666666667C6.640386666666666 9.650866666666666 6.432313333333333 9.5091 6.2164399999999995 9.536166666666666L6.14978 9.5497z"
                                                fill="currentColor"></path>

                                            <path
                                                d="M4.17582 6.281926666666667C4.34018 6.060033333333333 4.653313333333333 6.013393333333333 4.875206666666666 6.177766666666667L6.575206666666666 7.437033333333333C6.709806666666666 7.536733333333332 6.7855 7.697166666666666 6.776933333333333 7.8644333333333325C6.768366666666666 8.031699999999999 6.676566666666666 8.183566666666666 6.5325 8.268966666666666L4.8325 9.276333333333334C4.5949333333333335 9.417133333333332 4.288226666666667 9.3387 4.147446666666666 9.101099999999999C4.0066733333333335 8.863533333333333 4.085133333333333 8.556833333333334 4.3226933333333335 8.416066666666666L5.37502 7.792466666666667L4.27998 6.981299999999999C4.058086666666666 6.81696 4.011446666666666 6.503826666666666 4.17582 6.281926666666667z"
                                                fill="currentColor"></path>

                                            <path
                                                d="M11.8223 6.281926666666667C11.657933333333332 6.060033333333333 11.3448 6.013393333333333 11.122899999999998 6.177766666666667L9.422899999999998 7.437033333333333C9.288333333333332 7.536733333333332 9.212599999999998 7.697166666666666 9.221166666666665 7.8644333333333325C9.229766666666666 8.031699999999999 9.321533333333333 8.183566666666666 9.465633333333333 8.268966666666666L11.165633333333332 9.276333333333334C11.403166666666666 9.417133333333332 11.7099 9.3387 11.850666666666665 9.101099999999999C11.991433333333333 8.863533333333333 11.912966666666666 8.556833333333334 11.675433333333332 8.416066666666666L10.623099999999999 7.792466666666667L11.718133333333334 6.981299999999999C11.940033333333332 6.81696 11.986666666666666 6.503826666666666 11.8223 6.281926666666667z"
                                                fill="currentColor"></path>

                                            <path
                                                d="M8.000233333333332 2.333333333333333C4.870613333333333 2.333333333333333 2.33356 4.870386666666667 2.33356 8C2.33356 11.129633333333333 4.870613333333333 13.666666666666666 8.000233333333332 13.666666666666666C11.129833333333332 13.666666666666666 13.6669 11.129633333333333 13.6669 8C13.6669 4.870386666666667 11.129833333333332 2.333333333333333 8.000233333333332 2.333333333333333zM1.3335533333333331 8C1.3335533333333331 4.318099999999999 4.318326666666667 1.3333333333333333 8.000233333333332 1.3333333333333333C11.6821 1.3333333333333333 14.6669 4.318099999999999 14.6669 8C14.6669 11.681866666666666 11.6821 14.666666666666666 8.000233333333332 14.666666666666666C4.318326666666667 14.666666666666666 1.3335533333333331 11.681866666666666 1.3335533333333331 8z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </div>

                                </template>
                                <template #default>
                                    <div class="p-1 overflow-auto">
                                        <div class="grid grid-cols-10 gap-1">
                                            <div v-for="(emoji, index) in emojis" :key="index" @click="addEmoji(emoji)"
                                                class="inline-flex justify-center items-center border-gray-100 text-base text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                                {{ emoji }}
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-popover>

                            <div type="button"
                                class="inline-flex justify-center items-center border border-gray-100 dark:border-gray-400 p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                <svg id="icon" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" class="w-4 h-4" aria-hidden="true"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M7.571333333333333 5.642906666666666C6.5793133333333325 5.642906666666666 5.642753333333333 6.618966666666666 5.642753333333333 8.000066666666665C5.642753333333333 9.381133333333333 6.5793133333333325 10.357199999999999 7.571333333333333 10.357199999999999C8.563333333333333 10.357199999999999 9.499866666666666 9.381133333333333 9.499866666666666 8.000066666666665C9.499866666666666 6.618966666666666 8.563333333333333 5.642906666666666 7.571333333333333 5.642906666666666zM4.642753333333333 8.000066666666665C4.642753333333333 6.225226666666666 5.8808066666666665 4.642906666666667 7.571333333333333 4.642906666666667C9.261833333333332 4.642906666666667 10.499866666666666 6.225226666666666 10.499866666666666 8.000066666666665C10.499866666666666 9.774866666666666 9.261833333333332 11.357199999999999 7.571333333333333 11.357199999999999C5.8808066666666665 11.357199999999999 4.642753333333333 9.774866666666666 4.642753333333333 8.000066666666665z"
                                        fill="currentColor"></path>

                                    <path
                                        d="M10.142933333333332 4.928546666666667C10.4191 4.928546666666667 10.642933333333332 5.152406666666666 10.642933333333332 5.428546666666667L10.642933333333332 9.2252C10.642933333333332 9.942633333333333 11.248999999999999 10.398666666666667 11.991566666666666 10.313733333333332C12.674966666666666 10.235533333333333 13.5227 9.639933333333332 13.621933333333333 8.034233333333333C13.639 7.7585999999999995 13.876199999999999 7.548966666666666 14.151833333333332 7.566033333333333C14.427433333333333 7.5830666666666655 14.637066666666666 7.8203 14.620033333333334 8.095933333333333C14.496433333333332 10.095066666666666 13.355166666666666 11.164233333333332 12.105233333333333 11.307233333333333C10.914533333333333 11.443466666666666 9.642933333333332 10.677233333333334 9.642933333333332 9.2252L9.642933333333332 5.428546666666667C9.642933333333332 5.152406666666666 9.866833333333332 4.928546666666667 10.142933333333332 4.928546666666667z"
                                        fill="currentColor"></path>

                                    <path
                                        d="M8 2.375C4.8934 2.375 2.375 4.8934 2.375 8C2.375 11.1066 4.8934 13.625 8 13.625C9.132133333333332 13.625 10.184733333333334 13.291066666666666 11.066533333333332 12.716433333333331C11.2979 12.5657 11.607666666666667 12.631033333333331 11.758433333333333 12.862400000000001C11.909166666666666 13.093733333333333 11.843833333333333 13.403533333333332 11.612466666666666 13.5543C10.5732 14.231499999999999 9.3318 14.625 8 14.625C4.3411133333333325 14.625 1.375 11.6589 1.375 8C1.375 4.3411133333333325 4.3411133333333325 1.375 8 1.375C11.6589 1.375 14.625 4.3411133333333325 14.625 8C14.625 8.276133333333332 14.401133333333334 8.5 14.125 8.5C13.848866666666666 8.5 13.625 8.276133333333332 13.625 8C13.625 4.8934 11.1066 2.375 8 2.375z"
                                        fill="currentColor"></path>
                                </svg>
                            </div>

                            <div type="button"
                                class="inline-flex justify-center items-center border border-gray-100 dark:border-gray-400 p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                <svg id="icon" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" class="w-4 h-4" aria-hidden="true"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M5.666666666666666 5.648313333333332C5.2883466666666665 5.648313333333332 4.9816666666666665 5.9549933333333325 4.9816666666666665 6.333313333333333C4.9816666666666665 6.71164 5.2883466666666665 7.0183 5.666666666666666 7.0183C6.04498 7.0183 6.351666666666667 6.71164 6.351666666666667 6.333313333333333C6.351666666666667 5.9549933333333325 6.04498 5.648313333333332 5.666666666666666 5.648313333333332zM4.018333333333333 6.333313333333333C4.018333333333333 5.42296 4.75632 4.684973333333333 5.666666666666666 4.684973333333333C6.577013333333333 4.684973333333333 7.3149999999999995 5.42296 7.3149999999999995 6.333313333333333C7.3149999999999995 7.2436333333333325 6.577013333333333 7.981633333333333 5.666666666666666 7.981633333333333C4.75632 7.981633333333333 4.018333333333333 7.2436333333333325 4.018333333333333 6.333313333333333z"
                                        fill="currentColor"></path>

                                    <path
                                        d="M8 3.3317066666666664C6.321186666666667 3.3317066666666664 4.855333333333333 3.4171066666666663 3.820593333333333 3.5010199999999996C3.1014733333333333 3.5593333333333335 2.5440733333333334 4.108686666666666 2.48 4.821366666666666C2.4040466666666664 5.666206666666666 2.333333333333333 6.780333333333333 2.333333333333333 7.9984C2.333333333333333 9.216433333333333 2.4040466666666664 10.330533333333332 2.48 11.1754C2.5440733333333334 11.888066666666667 3.1014733333333333 12.437433333333333 3.820593333333333 12.495733333333334C4.855333333333333 12.579666666666665 6.321186666666667 12.665066666666664 8 12.665066666666664C9.678999999999998 12.665066666666664 11.144933333333334 12.5796 12.179733333333333 12.4957C12.898733333333332 12.437399999999998 13.456 11.8882 13.520066666666667 11.175699999999999C13.595999999999998 10.331233333333333 13.666666666666666 9.2173 13.666666666666666 7.9984C13.666666666666666 6.779433333333333 13.595999999999998 5.665519999999999 13.520066666666667 4.82104C13.456 4.10854 12.898733333333332 3.559353333333333 12.179733333333333 3.5010399999999997C11.144933333333334 3.4171266666666664 9.678999999999998 3.3317066666666664 8 3.3317066666666664zM3.7397666666666667 2.504293333333333C4.794879999999999 2.418733333333333 6.288386666666666 2.3317066666666664 8 2.3317066666666664C9.7118 2.3317066666666664 11.2054 2.4187466666666664 12.260533333333331 2.504313333333333C13.458733333333331 2.601493333333333 14.407866666666665 3.5282 14.516066666666667 4.731493333333333C14.593933333333332 5.597606666666666 14.666666666666666 6.742366666666666 14.666666666666666 7.9984C14.666666666666666 9.254366666666666 14.593933333333332 10.399133333333332 14.516066666666667 11.265266666666665C14.407866666666665 12.468533333333333 13.458733333333331 13.395266666666666 12.260533333333331 13.492433333333333C11.2054 13.578 9.7118 13.665066666666664 8 13.665066666666664C6.288386666666666 13.665066666666664 4.794879999999999 13.578 3.7397666666666667 13.492466666666667C2.541373333333333 13.395266666666666 1.5922066666666668 12.468333333333334 1.4840200000000001 11.264933333333333C1.4061199999999998 10.398466666666666 1.3333333333333333 9.253533333333333 1.3333333333333333 7.9984C1.3333333333333333 6.7432 1.4061199999999998 5.598253333333333 1.4840200000000001 4.731826666666667C1.5922066666666668 3.5284199999999997 2.541373333333333 2.6014733333333333 3.7397666666666667 2.504293333333333z"
                                        fill="currentColor"></path>

                                    <path
                                        d="M10.574933333333332 9.035466666666666C10.3016 8.762066666666666 9.858366666666665 8.762066666666666 9.584966666666666 9.035433333333334L8.230066666666666 10.390366666666665C7.660799999999999 10.959633333333333 6.737666666666667 10.959433333333333 6.16866 10.3898C5.943406666666666 10.164333333333332 5.5779733333333334 10.164233333333332 5.35258 10.3896L4.353533333333333 11.3885C4.15826 11.583733333333331 3.841673333333333 11.583733333333331 3.6464266666666667 11.388466666666666C3.451173333333333 11.1932 3.451193333333333 10.8766 3.646466666666666 10.681333333333331L4.645526666666666 9.682433333333332C5.261586666666666 9.066433333333332 6.260426666666666 9.066733333333332 6.876133333333333 9.683066666666665C7.0547 9.861799999999999 7.344333333333333 9.861899999999999 7.522966666666666 9.683266666666666L8.877833333333333 8.328333333333333C9.541766666666666 7.6644000000000005 10.618233333333333 7.664433333333333 11.282133333333334 8.328433333333333L12.3536 9.400066666666666C12.548833333333334 9.595333333333333 12.5488 9.9119 12.353499999999999 10.107166666666666C12.158233333333332 10.302399999999999 11.841666666666665 10.302399999999999 11.6464 10.107099999999999L10.574933333333332 9.035466666666666z"
                                        fill="currentColor"></path>
                                </svg>
                            </div>
                        </div>
                        <div @click="onPublishCommentClick"
                            class="inline-flex items-center justify-center w-20 py-2.5 px-4 text-sm font-medium text-center text-white bg-blue-400 rounded-lg dark:focus:ring-blue-900 hover:bg-blue-500">
                            发布
                        </div>
                    </div>
                </div>
            </form>

            <!-- 评论列表 -->
            <div v-if="comments && comments.length > 0" class="mt-12" @click="hideSendBtn">
                <div v-for="(comment, index) in comments" :key="index">
                    <!-- 一级评论 -->
                    <div class="flex gap-3 mt-5">
                        <!-- 左边头像栏 -->
                        <div>
                            <img v-if="comment.avatar && comment.avatar.length > 0" :src="comment.avatar" @click="jumpToUserHome(comment.userId)"
                                class="w-10 h-10 rounded-full cursor-pointer">
                            <svg v-else class="w-10 h-10 text-gray-400 rounded-full dark:text-gray-400"
                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                viewBox="0 0 20 20">
                                <path
                                    d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                            </svg>
                        </div>
                        <!-- 右边评论信息 -->
                        <div class="flex flex-col gap-2 grow">
                            <!-- 昵称 -->
                            <div class="text-xs text-[#FB7299]">
                                <span class="cursor-pointer font-bold" @click="jumpToUserHome(comment.userId)">{{ comment.nickname }}</span>
                            </div>
                            <!-- 评论内容 -->
                            <div class="text-sm dark:text-gray-400">{{ comment.content }}</div>
                            <!-- Meta 信息 -->
                            <div class="flex items-center text-xs text-gray-400">
                                <!-- 发布时间 -->
                                <div>{{ comment.createTime }}</div>
                                <div class="text-gray-400 cursor-pointer ml-4 hover:text-sky-600" v-if="isLogin"
                                @click="showReplyForm(index, comment.nickname, comment.id, comment.id)">
                                    回复
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 二级评论 -->
                    <div class="ml-12" v-if="comment.childComments && comment.childComments.length > 0">
                        <div v-for="(childComment, index2) in comment.childComments" :key="index2">
                            <!-- 头像、昵称、评论内容 -->
                            <div class="flex items-center gap-3 mt-5">
                                <!-- 左边头像栏 -->
                                <div>
                                    <img v-if="childComment.avatar && childComment.avatar.length > 0" @click="jumpToUserHome(childComment.userId)" 
                                        :src="childComment.avatar" class="w-6 h-6 rounded-full cursor-pointer">
                                    <svg v-else class="w-6 h-6 text-gray-400 rounded-full dark:text-gray-400"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path
                                            d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                                    </svg>
                                </div>
                                <!-- 昵称 -->
                                <div class="text-xs text-[#FB7299]" >
                                    <span class="cursor-pointer font-bold" @click="jumpToUserHome(childComment.userId)">{{ childComment.nickname }}</span>
                                </div>
                                <!-- 【回复 @xxx】 -->
                                <span v-if="childComment.replyNickname" class="text-gray-400 text-sm font-normal ml-1 mr-1">回复
                                    <span class="text-sky-600 font-normal text-sm cursor-pointer" @click="jumpToUserHome(childComment.replyUserId)">@{{ childComment.replyNickname }}</span>
                                    <span class="text-gray-400"> :</span>
                                </span>
                                <!-- 评论内容 -->
                                <div class="text-sm dark:text-gray-400">{{ childComment.content }}</div>
                            </div>
                            <!-- Meta 信息 -->
                            <div class="ml-9 mt-1 flex items-center text-xs text-gray-400">
                                <!-- 发布时间 -->
                                <div>{{ childComment.createTime }}</div>
                                <div class="text-gray-400 cursor-pointer ml-4 hover:text-sky-600" v-if="isLogin"
                                @click="showReplyForm(index, childComment.nickname, childComment.id, comment.id)">
                                    回复
                                </div>
                            </div>
                        </div>
                    </div>

                    <form class="ml-12 mt-5" v-if="comment.isShowReplyForm">
                        <div class="w-full mb-4 border-gray-200 rounded-lg bg-white dark:bg-gray-800">
                            <div class="flex items-center">
                                <!-- 用户登录头像 -->
                                <img class="w-10 h-10 rounded-full border dark:border-gray-300"
                                    :src="userStore.userInfo.avatar" alt="user photo">
                                <label for="comment" class="sr-only">Your comment</label>
                                <textarea id="comment" rows="1" @click="showReplySendBtn" v-model="replyCommentContent"
                                    class="block mx-4 p-2.5 w-full h-10 py-2 text-sm align-middle text-gray-900 bg-gray-100 rounded-lg border-0 hover:border hover:border-gray-300 focus:border hover:bg-white focus:bg-white dark:bg-gray-700 focus:border-gray-300 dark:text-gray-300 dark:placeholder-gray-400"
                                    :placeholder="replyPlaceholderText" required></textarea>
                            </div>

                            <div v-if="replySendButton"
                                class="flex items-center mt-1 justify-between ml-14 px-3 py-2 dark:border-gray-600">
                                <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
                                    <!-- Emoji Popover -->
                                    <el-popover placement="bottom-start" trigger="click" :width="336" offset=6>
                                        <template #reference>
                                            <div type="button"
                                                class="inline-flex justify-center items-center border border-gray-100 dark:border-gray-400 p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                                <svg id="icon" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
                                                    viewBox="0 0 16 16">
                                                    <path
                                                        d="M6.14978 9.5497C5.911519999999999 9.618533333333332 5.77148 9.876833333333334 5.8369800000000005 10.126666666666665C6.010859999999999 10.792133333333332 6.458333333333333 11.221066666666667 6.9891000000000005 11.3022C7.358466666666666 11.371699999999999 7.7259 11.253699999999998 8 10.9912C8.2289 11.203199999999999 8.517266666666666 11.320733333333333 8.822433333333333 11.322099999999999C9.428333333333333 11.324366666666666 9.968266666666667 10.8752 10.163466666666666 10.126666666666665C10.228933333333334 9.876833333333334 10.088899999999999 9.6185 9.850633333333333 9.549733333333332C9.612366666666667 9.480899999999998 9.3661 9.627666666666666 9.300633333333334 9.8775C9.194333333333333 10.287166666666666 8.959666666666667 10.39 8.8136 10.385066666666667C8.6771 10.381133333333333 8.507366666666666 10.289066666666667 8.426033333333333 10.021666666666667C8.366433333333333 9.828 8.1944 9.696733333333333 8.0002 9.696766666666665C7.805999999999999 9.696766666666665 7.634 9.828 7.574399999999999 10.0217C7.479933333333333 10.332566666666665 7.2652 10.411999999999999 7.106766666666666 10.376533333333333C6.978133333333333 10.348466666666667 6.791413333333333 10.229966666666666 6.699806666666666 9.877466666666667C6.640386666666666 9.650866666666666 6.432313333333333 9.5091 6.2164399999999995 9.536166666666666L6.14978 9.5497z"
                                                        fill="currentColor"></path>

                                                    <path
                                                        d="M4.17582 6.281926666666667C4.34018 6.060033333333333 4.653313333333333 6.013393333333333 4.875206666666666 6.177766666666667L6.575206666666666 7.437033333333333C6.709806666666666 7.536733333333332 6.7855 7.697166666666666 6.776933333333333 7.8644333333333325C6.768366666666666 8.031699999999999 6.676566666666666 8.183566666666666 6.5325 8.268966666666666L4.8325 9.276333333333334C4.5949333333333335 9.417133333333332 4.288226666666667 9.3387 4.147446666666666 9.101099999999999C4.0066733333333335 8.863533333333333 4.085133333333333 8.556833333333334 4.3226933333333335 8.416066666666666L5.37502 7.792466666666667L4.27998 6.981299999999999C4.058086666666666 6.81696 4.011446666666666 6.503826666666666 4.17582 6.281926666666667z"
                                                        fill="currentColor"></path>

                                                    <path
                                                        d="M11.8223 6.281926666666667C11.657933333333332 6.060033333333333 11.3448 6.013393333333333 11.122899999999998 6.177766666666667L9.422899999999998 7.437033333333333C9.288333333333332 7.536733333333332 9.212599999999998 7.697166666666666 9.221166666666665 7.8644333333333325C9.229766666666666 8.031699999999999 9.321533333333333 8.183566666666666 9.465633333333333 8.268966666666666L11.165633333333332 9.276333333333334C11.403166666666666 9.417133333333332 11.7099 9.3387 11.850666666666665 9.101099999999999C11.991433333333333 8.863533333333333 11.912966666666666 8.556833333333334 11.675433333333332 8.416066666666666L10.623099999999999 7.792466666666667L11.718133333333334 6.981299999999999C11.940033333333332 6.81696 11.986666666666666 6.503826666666666 11.8223 6.281926666666667z"
                                                        fill="currentColor"></path>

                                                    <path
                                                        d="M8.000233333333332 2.333333333333333C4.870613333333333 2.333333333333333 2.33356 4.870386666666667 2.33356 8C2.33356 11.129633333333333 4.870613333333333 13.666666666666666 8.000233333333332 13.666666666666666C11.129833333333332 13.666666666666666 13.6669 11.129633333333333 13.6669 8C13.6669 4.870386666666667 11.129833333333332 2.333333333333333 8.000233333333332 2.333333333333333zM1.3335533333333331 8C1.3335533333333331 4.318099999999999 4.318326666666667 1.3333333333333333 8.000233333333332 1.3333333333333333C11.6821 1.3333333333333333 14.6669 4.318099999999999 14.6669 8C14.6669 11.681866666666666 11.6821 14.666666666666666 8.000233333333332 14.666666666666666C4.318326666666667 14.666666666666666 1.3335533333333331 11.681866666666666 1.3335533333333331 8z"
                                                        fill="currentColor"></path>
                                                </svg>
                                            </div>

                                        </template>
                                        <template #default>
                                            <div class="p-1 overflow-auto">
                                                <div class="grid grid-cols-10 gap-1">
                                                    <div v-for="(emoji, index) in emojis" :key="index"
                                                        @click="addReplyEmoji(emoji)"
                                                        class="inline-flex justify-center items-center border-gray-100 text-base text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                                        {{ emoji }}
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </el-popover>

                                    <div type="button"
                                        class="inline-flex justify-center items-center border border-gray-100 dark:border-gray-400 p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                        <svg id="icon" xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" class="w-4 h-4"
                                            aria-hidden="true" viewBox="0 0 16 16">
                                            <path
                                                d="M7.571333333333333 5.642906666666666C6.5793133333333325 5.642906666666666 5.642753333333333 6.618966666666666 5.642753333333333 8.000066666666665C5.642753333333333 9.381133333333333 6.5793133333333325 10.357199999999999 7.571333333333333 10.357199999999999C8.563333333333333 10.357199999999999 9.499866666666666 9.381133333333333 9.499866666666666 8.000066666666665C9.499866666666666 6.618966666666666 8.563333333333333 5.642906666666666 7.571333333333333 5.642906666666666zM4.642753333333333 8.000066666666665C4.642753333333333 6.225226666666666 5.8808066666666665 4.642906666666667 7.571333333333333 4.642906666666667C9.261833333333332 4.642906666666667 10.499866666666666 6.225226666666666 10.499866666666666 8.000066666666665C10.499866666666666 9.774866666666666 9.261833333333332 11.357199999999999 7.571333333333333 11.357199999999999C5.8808066666666665 11.357199999999999 4.642753333333333 9.774866666666666 4.642753333333333 8.000066666666665z"
                                                fill="currentColor"></path>

                                            <path
                                                d="M10.142933333333332 4.928546666666667C10.4191 4.928546666666667 10.642933333333332 5.152406666666666 10.642933333333332 5.428546666666667L10.642933333333332 9.2252C10.642933333333332 9.942633333333333 11.248999999999999 10.398666666666667 11.991566666666666 10.313733333333332C12.674966666666666 10.235533333333333 13.5227 9.639933333333332 13.621933333333333 8.034233333333333C13.639 7.7585999999999995 13.876199999999999 7.548966666666666 14.151833333333332 7.566033333333333C14.427433333333333 7.5830666666666655 14.637066666666666 7.8203 14.620033333333334 8.095933333333333C14.496433333333332 10.095066666666666 13.355166666666666 11.164233333333332 12.105233333333333 11.307233333333333C10.914533333333333 11.443466666666666 9.642933333333332 10.677233333333334 9.642933333333332 9.2252L9.642933333333332 5.428546666666667C9.642933333333332 5.152406666666666 9.866833333333332 4.928546666666667 10.142933333333332 4.928546666666667z"
                                                fill="currentColor"></path>

                                            <path
                                                d="M8 2.375C4.8934 2.375 2.375 4.8934 2.375 8C2.375 11.1066 4.8934 13.625 8 13.625C9.132133333333332 13.625 10.184733333333334 13.291066666666666 11.066533333333332 12.716433333333331C11.2979 12.5657 11.607666666666667 12.631033333333331 11.758433333333333 12.862400000000001C11.909166666666666 13.093733333333333 11.843833333333333 13.403533333333332 11.612466666666666 13.5543C10.5732 14.231499999999999 9.3318 14.625 8 14.625C4.3411133333333325 14.625 1.375 11.6589 1.375 8C1.375 4.3411133333333325 4.3411133333333325 1.375 8 1.375C11.6589 1.375 14.625 4.3411133333333325 14.625 8C14.625 8.276133333333332 14.401133333333334 8.5 14.125 8.5C13.848866666666666 8.5 13.625 8.276133333333332 13.625 8C13.625 4.8934 11.1066 2.375 8 2.375z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </div>

                                    <div type="button"
                                        class="inline-flex justify-center items-center border border-gray-100 dark:border-gray-400 p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-600">
                                        <svg id="icon" xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" class="w-4 h-4"
                                            aria-hidden="true" viewBox="0 0 16 16">
                                            <path
                                                d="M5.666666666666666 5.648313333333332C5.2883466666666665 5.648313333333332 4.9816666666666665 5.9549933333333325 4.9816666666666665 6.333313333333333C4.9816666666666665 6.71164 5.2883466666666665 7.0183 5.666666666666666 7.0183C6.04498 7.0183 6.351666666666667 6.71164 6.351666666666667 6.333313333333333C6.351666666666667 5.9549933333333325 6.04498 5.648313333333332 5.666666666666666 5.648313333333332zM4.018333333333333 6.333313333333333C4.018333333333333 5.42296 4.75632 4.684973333333333 5.666666666666666 4.684973333333333C6.577013333333333 4.684973333333333 7.3149999999999995 5.42296 7.3149999999999995 6.333313333333333C7.3149999999999995 7.2436333333333325 6.577013333333333 7.981633333333333 5.666666666666666 7.981633333333333C4.75632 7.981633333333333 4.018333333333333 7.2436333333333325 4.018333333333333 6.333313333333333z"
                                                fill="currentColor"></path>

                                            <path
                                                d="M8 3.3317066666666664C6.321186666666667 3.3317066666666664 4.855333333333333 3.4171066666666663 3.820593333333333 3.5010199999999996C3.1014733333333333 3.5593333333333335 2.5440733333333334 4.108686666666666 2.48 4.821366666666666C2.4040466666666664 5.666206666666666 2.333333333333333 6.780333333333333 2.333333333333333 7.9984C2.333333333333333 9.216433333333333 2.4040466666666664 10.330533333333332 2.48 11.1754C2.5440733333333334 11.888066666666667 3.1014733333333333 12.437433333333333 3.820593333333333 12.495733333333334C4.855333333333333 12.579666666666665 6.321186666666667 12.665066666666664 8 12.665066666666664C9.678999999999998 12.665066666666664 11.144933333333334 12.5796 12.179733333333333 12.4957C12.898733333333332 12.437399999999998 13.456 11.8882 13.520066666666667 11.175699999999999C13.595999999999998 10.331233333333333 13.666666666666666 9.2173 13.666666666666666 7.9984C13.666666666666666 6.779433333333333 13.595999999999998 5.665519999999999 13.520066666666667 4.82104C13.456 4.10854 12.898733333333332 3.559353333333333 12.179733333333333 3.5010399999999997C11.144933333333334 3.4171266666666664 9.678999999999998 3.3317066666666664 8 3.3317066666666664zM3.7397666666666667 2.504293333333333C4.794879999999999 2.418733333333333 6.288386666666666 2.3317066666666664 8 2.3317066666666664C9.7118 2.3317066666666664 11.2054 2.4187466666666664 12.260533333333331 2.504313333333333C13.458733333333331 2.601493333333333 14.407866666666665 3.5282 14.516066666666667 4.731493333333333C14.593933333333332 5.597606666666666 14.666666666666666 6.742366666666666 14.666666666666666 7.9984C14.666666666666666 9.254366666666666 14.593933333333332 10.399133333333332 14.516066666666667 11.265266666666665C14.407866666666665 12.468533333333333 13.458733333333331 13.395266666666666 12.260533333333331 13.492433333333333C11.2054 13.578 9.7118 13.665066666666664 8 13.665066666666664C6.288386666666666 13.665066666666664 4.794879999999999 13.578 3.7397666666666667 13.492466666666667C2.541373333333333 13.395266666666666 1.5922066666666668 12.468333333333334 1.4840200000000001 11.264933333333333C1.4061199999999998 10.398466666666666 1.3333333333333333 9.253533333333333 1.3333333333333333 7.9984C1.3333333333333333 6.7432 1.4061199999999998 5.598253333333333 1.4840200000000001 4.731826666666667C1.5922066666666668 3.5284199999999997 2.541373333333333 2.6014733333333333 3.7397666666666667 2.504293333333333z"
                                                fill="currentColor"></path>

                                            <path
                                                d="M10.574933333333332 9.035466666666666C10.3016 8.762066666666666 9.858366666666665 8.762066666666666 9.584966666666666 9.035433333333334L8.230066666666666 10.390366666666665C7.660799999999999 10.959633333333333 6.737666666666667 10.959433333333333 6.16866 10.3898C5.943406666666666 10.164333333333332 5.5779733333333334 10.164233333333332 5.35258 10.3896L4.353533333333333 11.3885C4.15826 11.583733333333331 3.841673333333333 11.583733333333331 3.6464266666666667 11.388466666666666C3.451173333333333 11.1932 3.451193333333333 10.8766 3.646466666666666 10.681333333333331L4.645526666666666 9.682433333333332C5.261586666666666 9.066433333333332 6.260426666666666 9.066733333333332 6.876133333333333 9.683066666666665C7.0547 9.861799999999999 7.344333333333333 9.861899999999999 7.522966666666666 9.683266666666666L8.877833333333333 8.328333333333333C9.541766666666666 7.6644000000000005 10.618233333333333 7.664433333333333 11.282133333333334 8.328433333333333L12.3536 9.400066666666666C12.548833333333334 9.595333333333333 12.5488 9.9119 12.353499999999999 10.107166666666666C12.158233333333332 10.302399999999999 11.841666666666665 10.302399999999999 11.6464 10.107099999999999L10.574933333333332 9.035466666666666z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </div>
                                </div>
                                <div @click="onReplyContentSubmit"
                                    class="inline-flex items-center justify-center w-20 py-2.5 px-4 text-sm font-medium text-center text-white bg-blue-400 rounded-lg dark:focus:ring-blue-900 hover:bg-blue-500">
                                    发布
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <!-- 用户登录 -->
    <!-- Main modal -->
    <div id="login-modal" tabindex="-1" aria-hidden="true"
        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative p-4 w-full max-w-md max-h-full">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                <!-- Modal header -->
                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                    <h3 class="text-xl text-center align-middle font-semibold text-gray-800 dark:text-gray-400">
                        <img :src="blogSettingsStore.blogSettings.miniLogo" class="h-10 mr-2 inline"
                            alt="wjblog Logo" />
                        账号密码登录
                    </h3>
                    <button type="button" @click="loginModal.hide()"
                        class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        data-modal-hide="login-modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <!-- Modal body -->
                <div class="p-4 md:p-5">
                    <!-- 引入 Element Plus 表单组件，移动端设置宽度为 5/6，PC 端设置为 2/5 -->
                    <el-form class="space-y-4" ref="formRef" :rules="rules" :model="loginForm">
                        <el-form-item prop="username">
                            <!-- 输入框组件 -->
                            <label for="email"
                                class="block mb-2 text-sm font-semibold text-gray-900 dark:text-gray-300">用户名</label>
                            <el-input size="large" v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User"
                                clearable />
                        </el-form-item>
                        <el-form-item prop="password">
                            <!-- 密码框组件 -->
                            <label for="password"
                                class="block mb-2 text-sm font-semibold text-gray-900 dark:text-gray-300">密码</label>
                            <el-input size="large" type="password" v-model="loginForm.password" placeholder="请输入密码"
                                :prefix-icon="Lock" clearable show-password />
                        </el-form-item>

                        <div class="flex justify-between">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="comment-remember" type="checkbox" value=""
                                        class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-600 dark:border-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
                                        required />
                                </div>
                                <label for="comment-remember"
                                    class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">记住我</label>
                            </div>
                            <a @click="userArtificial"
                                class="text-sm text-blue-700 hover:underline dark:text-blue-500">忘记密码?</a>
                        </div>
                        <el-form-item>
                            <!-- 登录按钮，宽度设置为 100% -->
                            <el-button class="w-full mt-2 dark:text-gray-100" size="large" type="primary"
                                :loading="loading" @click="userLogin">登录</el-button>
                        </el-form-item>
                        <!-- <button type="submit" @click="userLogin"
                            class="w-full text-white bg-sky-600 font-medium hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-sky-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-sky-500 dark:hover:bg-sky-600 dark:focus:ring-sky-800">
                            登录
                        </button> -->
                        <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
                            没有账户? <a @click="registerUser"
                                class="text-blue-700 hover:underline dark:text-blue-500">注册账户</a>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
import { reactive, ref, watch } from 'vue'
import { onMounted, onUnmounted } from 'vue';
import {
    initTooltips, initPopovers,
    Modal
} from 'flowbite'
import { getToken, setToken } from '@/composables/auth';
import { login } from '@/api/frontend/user';
import { ElMessage } from 'element-plus';
import { showMessage, showModel } from '@/composables/utils';
import { useBlogSettingsStore } from '@/stores/blogsettings';
import { useRoute, useRouter } from 'vue-router';
import { User, Lock, Checked } from '@element-plus/icons-vue'
import { getCommentList, publishComment } from '@/api/frontend/comment';
// emojis 表情符号
const emojis = ref(['😃', '😁', '😅', '😂', '😍', '😜', '😝', '🤑', '🥵', '🥰', '😙', '😎'
    , '😵', '😭', '😱', '😖', '🥳', '👽', '🙈', '🤡', '😤', '💣', '💯', '💢', '❤️', '👍', '👏', '👋', '👌', '🤏', '🙏'])
    
const router = useRouter()
const route = useRoute()
onMounted(() => {
    // initTooltips()
    initPopovers()
})
// 获取登录用户信息
const userStore = useUserStore()
// 博客设置信息
const blogSettingsStore = useBlogSettingsStore()

// 总评论数
const total = ref(0)

// 评论框是否显示发送按钮
const sendButton = ref(false)
// 回复评论框是否显示发送按钮
const replySendButton = ref(false)
// 显示发送按钮
const showSendBtn = () => {
    sendButton.value = true
}
// 隐藏发送按钮
const hideSendBtn = () => {
    sendButton.value = false
}
// 显示回复发送按钮
const showReplySendBtn = () => {
    replySendButton.value = true
}
// 隐藏回复发送按钮
const hideReplySendBtn = () => {
    replySendButton.value = false
}
// 隐藏所有评论发送按钮
const hideAllSendBtn = () => {
    sendButton.value = false
    replySendButton.value = false
}
// 跳转到用户主页
const jumpToUserHome = (userId) => {
    let path = router.resolve({path: '/user/person/' + userId})
    // 跳转到新页面打开
    window.open(path.href, '_blank')
}

// 回复评论默认值
const replyPlaceholderText = ref('你猜我在评论区等待谁？')
// 回复评论内容
const replyCommentContent = ref('')
// 上一次回复的评论id
const lastReplyCommentId = ref(null)
// 当前回复的评论 ID
const currReplyCommentId = ref(null)
// 当前回复的父级 ID
const currParentCommentId = ref(null)

// 展示回复表单
const showReplyForm = (index, nickname, replyCommentId, parentCommentId) => {
    // 拿到当前下标的评论
    let comment = comments.value[index]
    // 判断当前评论是否处于回复状态
    if (comment && comment.isShowReplyForm && lastReplyCommentId.value && lastReplyCommentId.value == replyCommentId) {
        // 回复评论框隐藏
        comment.isShowReplyForm = false
        // 将上一次回复的评论id置为 null
        lastReplyCommentId.value = null
    } else {
        // 先将评论数组中一级评论的所有 isShowReplyForm 字段设置为 false
        comments.value.forEach(comment => comment.isShowReplyForm = false)
        // isShowReplyForm 置为 true
        comment.isShowReplyForm = true
        // 将上一次回复的评论id置为当前评论id
        lastReplyCommentId.value = replyCommentId
        currReplyCommentId.value = replyCommentId
        currParentCommentId.value = parentCommentId
    }
    
    // 动态设置评论回复表单中的 textarea 的 placeholder 提示文字
    replyPlaceholderText.value = '回复 @' + nickname + ':'
    // 清空回复评论内容
    replyCommentContent.value = ''
}

// 评论表单
const commentForm = reactive({
    content: '',
    routerUrl: route.query.articleId ? (route.path + '?articleId=' + route.query.articleId) : route.path,
    website: '',
    replyCommentId: null,
    parentCommentId: null
})

// 初始化评论表单
const initCommentForm = () => {
    commentForm.routerUrl = route.query.articleId ? (route.path + '?articleId=' + route.query.articleId) : route.path
    commentForm.website = ''
}
initCommentForm()

// 监听路由
watch(route, (newRoute, oldRoute) => {
    // 重新渲染评论数据
    commentForm.routerUrl = route.query.articleId ? (route.path + '?articleId=' + route.query.articleId) : route.path
    initComments()
})

// 发布评论
const onPublishCommentClick = () => {
    // 校验字段
    if (commentForm.content == '') {
        showMessage("评论内容不能为空！", 'warning')
        return
    }
    // 发送请求
    publishComment(commentForm).then((res) => {
        if (res.success == true) {
            // 提示发布成功
            showMessage("评论发布成功！")
            // 隐藏发送按钮
            hideSendBtn()
            // 清空评论内容
            commentForm.content = ''
            // 初始化评论列表
            initComments()
        } else if (res.code == '7011'){
            showMessage(res.message, 'warning')
            // 隐藏发送按钮
            hideSendBtn()
            // 清空评论内容
            commentForm.content = ''
            // 初始化评论列表
            initComments()
        } else {
            // 提示发布失败
            showMessage(res.message, 'error')
        }
    })
}

// 回复评论
const onReplyContentSubmit = () => {
    // 初始化评论
    initCommentForm()
    // 校验字段
    if (replyCommentContent.value == null || replyCommentContent.value == '') {
        showMessage("回复内容不能为空！", 'warning')
        return
    }
    // 设置回复评论表单
    commentForm.content = replyCommentContent.value
    commentForm.replyCommentId = currReplyCommentId.value
    commentForm.parentCommentId = currParentCommentId.value
    // 回复评论
    publishComment(commentForm).then((res) => {
        if (res.success == true) {
            // 提示发布成功
            showMessage("回复成功！")
            // 隐藏发送按钮
            hideReplySendBtn()
            // 清空评论内容
            replyCommentContent.value = ''
            commentForm.content = ''
            // 初始化评论列表
            initComments()
        } else if (res.code == '7011'){
            showMessage(res.message, 'warning')
            // 隐藏发送按钮
            hideReplySendBtn()
            // 清空评论内容
            replyCommentContent.value = ''
            commentForm.content = ''
            // 初始化评论列表
            initComments()
        }
        else {
            // 提示发布失败
            showMessage(res.message, 'error')
        }
    })
}

// 添加表情
const addEmoji = (emoji) => {
    commentForm.content += emoji
}
// 评论回复表单：添加 Emoji
const addReplyEmoji = (emoji) => {
    replyCommentContent.value = replyCommentContent.value + emoji
}

// 确认用户是否登录
const confirmLogin = () => {
    // 获取token 
    let token = getToken()
    if (token == null) return false

    // 获取用户登录信息
    let tmpUserStore = useUserStore()
    // 获取用户登录信息key
    let keys = Object.keys(tmpUserStore.userInfo)
    // 判断用户是否登录
    if (keys.length == 0) return false

    return true
}

// 监听token
watch(() => {
    return getToken()
}, (newValue, oldValue) => {
    isLogin.value = confirmLogin()
})

// 监听userInfo
watch(() => {
    let tmp = useUserStore()
    return tmp.userInfo
}, (newValue, oldValue) => {
    isLogin.value = confirmLogin()
})

// 用户登录状态
const isLogin = ref(false)

// 获取用户登录状态
onMounted(() => {
    isLogin.value = confirmLogin()
})

// 登录表单
const loginForm = ref({
    username: '',
    password: ''
})
//登录加载按钮
const loading = ref(false)
const formRef = ref(null)
//表单验证规则
const rules = {
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    password: [
        {
            required: true,
            message: "密码不能为空！",
            trigger: "blur"
        }
    ]
}

const userLogin = () => {
    console.log("用户登录")
    //先验证表单字段是否合法
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log("表单验证参数不合法")
            return false
        }
        //开始加载
        loading.value = true
        let params = {
            "username": loginForm.value.username,
            "password": loginForm.value.password
        }
        login(params).then((res) => {
            if (res.success == true) {
                //提示登录成功
                showMessage("您好！" + loginForm.value.username + "，登录成功！")
                //将token保存到cookie
                let token = res.data.token
                setToken(token)
                //获取用户信息
                userStore.setUserInfo()
                // 设置为登录状态
                isLogin.value = true
                // 关闭登录弹框
                loginModal.value.hide()
            } else {
                //提示登录失败
                let message = res.message
                ElMessage({
                    message: message,
                    type: "error"
                })
            }
        }).finally(() => {
            //结束加载
            loading.value = false
        })
    })
}

const loginModal = ref(null)

const modalOptions = {
    placement: 'center-center', // 弹框位置
    backdrop: 'dynamic',
    backdropClasses:
        'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    closable: true,
    onHide: () => {
        console.log('modal is hidden');
    },
    onShow: () => {
        console.log('modal is shown');
    },
    onToggle: () => {
        console.log('modal has been toggled');
    },
};

const loginInstanceOptions = {
  id:'login-modal',
  override: true
};

// 初始化 flowbit 相关组件
onMounted(() => {
    // 初始化
    const $loginModalElement = document.querySelector('#login-modal');
    loginModal.value = new Modal($loginModalElement, modalOptions, loginInstanceOptions);
})

// 显示登录框
const showLoginModal = () => {
    loginModal.value.show()
}
const userArtificial = () => {
    showModel(
        "请以【找回密码+用户名】作为邮件标题，内容至少包括用户名，绑定的手机号，QQ号，邮箱（如未绑定可省略），新密码等个人信息，信息越完整成功概率越高，发送邮件至weijianhuawen@163.com，我们将在15个工作日内将处理结果通过邮件告知您！",
        "null",
        "联系管理员",
        true
    ).then(() => {
        console.log("找回密码")
    }).catch(() => {
        console.log("找回密码")
    })
}

const registerUser = () => {
    // 关闭登录弹框
    loginModal.value.hide()
    // 跳转到注册页面
    router.push({ path: '/user/register' })
}

// 评论数组
const comments = ref([])
// 初始化评论列表
const initComments = () => {
    // 通过路由 query 中的 artilceId 是否为空，来判断是文章详情页，还是 wiki 详情页，从而设置不同的路由地址
    let path = route.query.articleId ? (route.path + '?articleId=' + route.query.articleId) : route.path
    // 获取当前路由下的所有评论
    getCommentList({routerUrl: path}).then((res) => {
        if (res.success == true) {
            // 评论数组
            comments.value = res.data.comments
            // 评论总数
            total.value = res.data.total
        }})
}
initComments()
</script>
